/**
 * 角色视角切换组件
 */
import React from 'react';
import { User, BarChart3, DollarSign } from 'lucide-react';

export type RoleView = 'manager' | 'operator' | 'finance';

interface RoleViewSwitcherProps {
  currentView: RoleView;
  onViewChange: (view: RoleView) => void;
}

const RoleViewSwitcher: React.FC<RoleViewSwitcherProps> = ({ currentView, onViewChange }) => {
  const views = [
    {
      value: 'manager' as RoleView,
      label: '管理者视角',
      icon: <User size={18} />,
      description: '大盘健康度、异常预警',
    },
    {
      value: 'operator' as RoleView,
      label: '运营视角',
      icon: <BarChart3 size={18} />,
      description: '活动效果、用户行为',
    },
    {
      value: 'finance' as RoleView,
      label: '财务视角',
      icon: <DollarSign size={18} />,
      description: '收支、利润、成本',
    },
  ];

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
      <div className="flex items-center gap-2 mb-3">
        <span className="text-sm font-medium text-gray-600">视角切换：</span>
      </div>
      <div className="flex flex-wrap gap-2">
        {views.map((view) => (
          <button
            key={view.value}
            onClick={() => onViewChange(view.value)}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
              currentView === view.value
                ? 'bg-blue-500 text-white shadow-md'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            {view.icon}
            <span>{view.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
};

export default RoleViewSwitcher;


